<!--
 * @Description: useDateFormat（日期格式化）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:34:51
 * @LastEditTime: 2022-12-30 09:36:49
 * @LastEditors: r_yuesheng
-->
<template>
  <div class="flex">
    <h3>当前时间为：{{currTime}}</h3>
  </div>
  <div class="mt20">
    <h3>标准时间：{{currNowTime}}</h3>
  </div>
  <div class="mt20">
    <h3>中文时间：{{currCnTime}}</h3>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useNow, useDateFormat } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        currTime: '',
        currNowTime: '',
        currCnTime: '',
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      state.currTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss:SSS A dddd');
      state.currNowTime = useNow();
      state.currCnTime = useDateFormat(useNow(), 'YYYY年MM月DD日 HH时mm分ss秒SSS毫秒  dddd');
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>